<script setup>
import {onMounted, reactive} from "vue";
import temblorSeal from "@/api/temblor/temblorSeal.js";
import {Message} from "@arco-design/web-vue";

onMounted(() => {
  getList()
})
const column = [
  {
    title: '所属用户',
    dataIndex: 'user.username'
  },
  {
    title: '类型',
    slotName: 'type'
  },
  {
    title: '数量',
    dataIndex: 'number'
  },
  {
    title: '事由',
    dataIndex: 'cause'
  },
  {
    title: '状态',
    slotName: 'status'
  },
  {
    title: '是否外带',
    slotName: 'besides'
  },
  {
    title: '申请日期',
    dataIndex: 'created_at'
  },
  {
    title: '操作',
    slotName: 'action'
  }
]
const pagInfo = reactive({
  page: 1,
  limit: 10,
  total: 1,
  list: [],
  type: ''
})
const getList = async () => {
  const res = await temblorSeal.list({
    page: pagInfo.page,
    limit: pagInfo.limit,
    type: pagInfo.type
  })
  pagInfo.list = res.data.list
  pagInfo.total = res.data.total
  pagInfo.page = res.data.page
  pagInfo.limit = res.data.limit
}
const consent = async (id) => {
  const res = await temblorSeal.consent({
    id: id
  })
  if (res.code === 200) {
    await getList()
    Message.success("审核通过")
  } else {
    Message.error("失败")
  }
}
const refuse = async (id) => {
  const res = await temblorSeal.refuse({
    id: id
  })
  if (res.code === 200) {
    await getList()
    Message.success("成功")
  } else {
    Message.error("失败")
  }
}
const query = () => {
  getList()
}
const clear = () => {
  pagInfo.type = null
  getList()
}
const changePage = (page) => {
  pagInfo.page = page
  getList()
}
</script>

<template>
  <a-card>
    <a-space>
      <a-select style="width: 300px;" allow-clear @clear="clear" v-model="pagInfo.type" placeholder="选择类型查询">
        <a-option :value="1">公章</a-option>
        <a-option :value="2">电子章</a-option>
        <a-option :value="3">总支章</a-option>
      </a-select>
      <a-button @click="query" type="primary">查询</a-button>
    </a-space>
    <a-table class="mt-3" :columns="column" :data="pagInfo.list">
      <template #type="{record}">
        <a-tag color="red" v-if="record.type === 1">
          公章
        </a-tag>
        <a-tag color="blue" v-if="record.type === 2">
          电子章
        </a-tag>
        <a-tag color="orange" v-if="record.type === 3">
          总支章
        </a-tag>
      </template>
      <template #status="{record}">
        <a-tag color="green" v-if="record.status === 1">
          同意
        </a-tag>
        <a-tag color="red" v-if="record.status === 2">
          不同意
        </a-tag>
        <a-tag color="orange" v-if="record.status === 3">
          待审核
        </a-tag>
      </template>
      <template #besides="{record}">
        <a-tag color="green" v-if="record.besides === 1">
          是
        </a-tag>
        <a-tag color="red" v-if="record.besides === 0">
          否
        </a-tag>

      </template>
      <template #action="{record}">
        <a-space>
          <a-popconfirm content="确定要同意吗?" @ok="consent(record.id)">
            <a-button
                v-if="record.status === 3"
                size="mini" type="primary" status="success">
              同意
            </a-button>
          </a-popconfirm>
          <a-popconfirm content="确定不同意吗?" @ok="refuse(record.id)">
            <a-button v-if="record.status === 3" size="mini" type="primary" status="danger">
              不同意
            </a-button>
          </a-popconfirm>

        </a-space>
      </template>
    </a-table>
    <a-pagination class="mt-3" :total="pagInfo.total" :current="pagInfo.page" :page-size="pagInfo.limit"
                  @change="changePage"
    ></a-pagination>
  </a-card>
</template>

<style scoped>

</style>